<template>
  <div id="map" ref="map">
  </div>
</template>

<script>
  import BMap from 'BMap'
  import mapImgMeter from '../../assets/img/water_meter.png';
  const deviceSize = new BMap.Size(32,32);
  const mapIconMeter = new BMap.Icon(mapImgMeter, deviceSize, { //会以base64的方式传参iconCar
    imageSize: deviceSize
  });
  export default {
    name: "baidumap",
    data () {
      return {
        map:null,
        zoomOverlay: null,
      }
    },
    mounted () {
      this.createMap()
    },
    methods: {
      createMap () {
        /* eslint-disable */
        // 创建Map实例
        this.map = new BMap.Map("map")
        this.$refs.map.style.background = '';
        // 初始化地图,设置中心点坐标和地图级别
        this.map.centerAndZoom(new BMap.Point(117.05126, 39.3893), 13)
        //添加地图类型控件
        /*this.map.addControl(new BMap.MapTypeControl({
          mapTypes:[BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
        }))*/
        // this.map.setMapStyle({style: 'midnight'});
        // 设置地图显示的城市 此项是必须设置的
        this.map.setCurrentCity("天津市")
        //开启鼠标滚轮缩放
        this.map.enableScrollWheelZoom(true)

        let styleJson = [
          {
            'featureType': 'land',
            'elementType': 'geometry',
            'stylers': {
              'visibility': 'on',
              'color': '#ffffffff'
            }
          }, {
            'featureType': 'water',
            'elementType': 'geometry',
            'stylers': {
              'visibility': 'on',
              'color': '#ff5400ff'
            }
          }, {
            'featureType': 'green',
            'elementType': 'geometry',
            'stylers': {
              'visibility': 'on',
              'color': '#ff54006e'
            }
          }
        ];
        //this.map.setMapStyleV2({styleJson:styleJson});
        this.map.setMapStyleV2({styleId:'48096cea362f37db8287e3f6368011b9'});

        let _this = this
        // 地图点击
        this.map.addEventListener('click', function (e) {
          console.log('点击位置经纬度：' , e.point);
        });
        // 地图加载完成
        this.map.addEventListener('tilesloaded', function () {
          _this.addBoundary()
          _this.initData()
        });
      },
      addBoundary () {
        let bdary = new BMap.Boundary();
        let _this = this
        if (this.zoomOverlay == null) {
          this.zoomOverlay = []
        } else {
          for (let i = 0;i < this.zoomOverlay.length;i++) {
            _this.map.removeOverlay(this.zoomOverlay[i]);
          }
          this.zoomOverlay = []
        }
        bdary.get("天津市", function(rs){       // 获取行政区域
          let count = rs.boundaries.length; // 行政区域的点有多少个
          for(let i = 0; i < count; i++){
            let ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 3, strokeColor: '#38e2f0AA', strokeOpacity: 1, fillColor:'#08304a02',fillColorOpacity: 1}); //建立多边形覆盖物
            _this.zoomOverlay.push(ply)
            _this.map.addOverlay(ply);  // 添加覆盖物
          }
        })
      },
      initData () {
        let points =[
          {lat: 39.38394, lng: 117.010297,icon: mapIconMeter , name: '数据1', addr: '数据1'},
          {lat: 39.3893, lng: 117.05126,icon: mapIconMeter , name: '数据2', addr: '数据1'},
          {lat: 39.359514, lng: 117.072172,icon: mapIconMeter , name: '数据3', addr: '数据1'},
          {lat: 39.422529, lng: 117.0190647,icon: mapIconMeter , name: '数据4', addr: '数据1'},
          {lat: 39.38885, lng: 117.064195,icon: mapIconMeter , name: '数据5', addr: '数据1'}
        ];
        let markers = [];
        let pt = null;
        for (let i = 0; i < points.length; i++) {
          pt = new BMap.Point(points[i].lng, points[i].lat)
          let marker = new BMap.Marker(pt, {icon: points[i].icon})
          marker.customData = points[i]
          markers.push(marker);
          marker.addEventListener("click",this.showInfo)
          this.map.addOverlay(marker)
        }
      },
      showInfo (e) {
        console.log('showInfo：' , e);
        let infoWindow = this.createInfoWindow(e.currentTarget.customData);
        infoWindow.open(e.currentTarget);
      },
      //创建InfoWindow
      createInfoWindow(info){
        let opts = {
          boxStyle: {
            width: '300px',
            height: '200px'
            // margin: '30px 0',
          },
          closeIconWidth: '20px',
          closeIconMargin: '10px 10px 0 0',
          closeIconUrl: require('../../assets/icon/close.png'),
          enableAutoPan: false,
          align: INFOBOX_AT_TOP
        }
        let html = "<div class='infoBoxContent '><h3>设备信息</h3><hr /><div>" +
                "<p>名称："+info.name+"</p>" +
                "<p>状态："+info.name+"</p>" +
                "<p>地址："+info.addr+"</p>" +
                "<div align=\"center\"><button>确定</button></div></div></div>";
        let iw = new BMapLib.InfoBox(this.map,html,opts);
        return iw;
      }
    }
  }
</script>

<style scoped>
  #map{
    min-height: 200px;
    width: 100%;
    height: 100%;
    background: transparent;
  }
</style>
<style>
  .BMap_cpyCtrl
  {
    display:none;
  }
  .anchorBL{display:none;}
  #map .BMap_pop .BMap_center{
    background: #2c8ef0;
    border-left: 1px solid #38e2f0;
    border-right: 1px solid #38e2f0;
  }
  .infoBox{
    background: #2c8ef07a;
    border-radius: 10px;
    border: 1px solid #2c8ef0;
  }
  .infoBoxContent{
    margin:10px;
    max-height: 230px;
  }
  .infoBoxContent button{
    background-color: #008CBA;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 16px;
    width: 120px;
  }
  .infoBoxContent h3{
    color: white;
    margin: 5px;
  }
  .infoBoxContent hr{
    border: 1px solid #fff;
  }
  .infoBoxContent p{
    color:white;
    margin: 8px;
  }
  .infoBoxContent:before {
    content: '';
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-top-color: #2c8ef0;
    position: absolute;
    left: 50%;
    top: 100%;
    margin-left: -20px;
  }
</style>
